iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0
Modern Web

CSS大全閱讀筆記系列 第 4

第二章:選擇器(2)

  • 分享至 

  • xImage
  •  
  1. 屬性選擇器:
    a. 簡單屬性選擇器:
    - 選擇擁有特定屬性的元素,不論屬性的數值。
    - 寫法:(令第一個<a>顯示粗體)
    (HTML)<a href="##" title="h1a">...</a><a href="##">...</a>
    (CSS)a[href][title] {font-weight: bold;}
    b. 精確屬性值選擇器:
    - 限縮選擇條件,選擇特定屬性數值的元素。
    - 與ID選擇器以id為條件的屬性選擇器並不完全相同(h1#homeh1[id="home"]),在權重上會有差異。
    - 寫法:(令連結到hppts://ithelp.ithome.com.tw網址的<a>顯示粗體)
    (HTML)<a href="https://ithelp.ithome.com.tw/">...</a><a href="##">...</a>
    (CSS)a[href][title] {font-weight: bold;}
    c. 特殊屬性選擇器:不依據完整的設定值,而是依據部分設定值選擇元素。
    - *[class|="en"]:|,選擇所有屬性值為en或en-開頭的元素,例<h1 class="en-header">......</h1><p class="en">......</p>
    - p[class~=urgent]:~,在空白分隔的設定值清單中比對符合urgent字串的元素,例<p class="urgent warning">......</p>,和p.urgent相同。
    - span[class*="red"]:*,選擇所有具有class屬性且設定值包含red字串的元素,例<span class="red-robin">...</span><span class="red">...</span><span class="redline">...</span><span class="red hood">...</span>
    - span[class^="red"]:^,選擇所有具有class屬性且設定值字首為red字串的元素,例<span class="redline">...</span>
    - span[class$="ed"]:$,選擇所有具有class屬性且設定值字尾為ed字串的元素,例<span class="checked">...</span>

上一篇
第二章:選擇器(1)
下一篇
第二章:選擇器(3)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言